aside {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1; }
  aside .example-enter {
    width: 0;
    -webkit-transition: all 300ms ease;
            transition: all 300ms ease; }
  aside .example-enter-active {
    width: 100%;
    -webkit-transition: all 5000ms ease;
            transition: all 5000ms ease; }
  aside .example-leave {
    width: 100%;
    -webkit-transition: all 300ms ease;
            transition: all 300ms ease; }
  aside .example-leave-active {
    width: 0;
    -webkit-transition: all 300ms ease;
            transition: all 300ms ease; }
  aside .aside_content {
    top: 2.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    aside .aside_content .aside_list {
      width: 10.5rem;
      height: 100%;
      background: #282828;
      border-top: 0.05rem solid #222;
      box-shadow: 0 0.05rem 0.05rem #363636 inset; }
      aside .aside_content .aside_list li {
        height: 2.5rem;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        line-height: 2.5rem;
        border-bottom: 0.05rem dotted #333;
        color: #9a9a9a;
        display: block; }
        aside .aside_content .aside_list li a {
          display: block;
          height: 100%;
          font-size: 0.7rem;
          color: #9a9a9a; }
          aside .aside_content .aside_list li a span {
            float: left; }
          aside .aside_content .aside_list li a i {
            float: right;
            font-size: 0.9rem;
            color: #4f4f4f; }
    aside .aside_content .aside_opacity {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
          -ms-flex: 1;
              flex: 1;
      background: #282828;
      opacity: 0.3; }
